<template>
  <div class="components-container">

    <p class="z_topTitleCon">
      <span class="z_topTitle">尖刀团排名</span>
      <el-date-picker :editable="false" :clearable="false" @change="dateChange()" v-model="month" type="month" placeholder="选择月" class='week-con'></el-date-picker>
    </p>
    <div class='chart-container'>
      <el-row :gutter="20" style="padding-bottom: 1.25rem;">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <el-table :data="tableData" :row-class-name="tableRowClassName" border style="width: 100%;font-size:1.1rem">
            <el-table-column prop="id" label="排名" header-align="center" align="center" width="80">
            </el-table-column>
            <el-table-column prop="departmentName" label="部门" header-align="center" align="center" width="200">
            </el-table-column>
            <el-table-column prop="positionName" label="岗位" header-align="center" align="center" width="200">
            </el-table-column>
            <el-table-column prop="levelName" label="级别" header-align="center" align="center" width="200">
            </el-table-column>
            <el-table-column prop="employeeName" header-align="center" align="center" label="姓名">
            </el-table-column>
            <el-table-column prop="parkingNum" header-align="center" align="center" label="车位抵任务">
            </el-table-column>
            <el-table-column prop="dealNum" header-align="center" align="center" label="成交套数">
            </el-table-column>
            <el-table-column prop="totalNum" header-align="center" align="center" label="成交总套数">
            </el-table-column>
            <el-table-column prop="remarks" header-align="center" align="center" label="备注">
            </el-table-column>
          </el-table>
          <el-pagination :current-page="page" @current-change="handleCurrentChange" class="pageCon" :page-size="pageSize" layout="prev, pager, next" :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style>
.pageCon {
  text-align: center;
  padding: 10px 0 20px 0
}

.el-table .danger-row {
  background: #2e7cde;
  color: white;
  /* font-weight: bold; */
}

.titleCon {
  font-size: 20px;
}
</style>
<script>
export default {
  data() {
    return {
      pickerOption: {
        firstDayOfWeek: 1
      },
      week: new Date(),
      tmpTableData: [],
      value: '0',
      page: 1,
      pageSize: 15,
      total: 0,
      options: [{
        value: '0',
        label: '总排名'
      }, {
        value: '1',
        label: '中层以上排名'
      }, {
        value: '2',
        label: '本月新增'
      }, {
        value: '3',
        label: '尖刀团'
      }],
      tableData: [],
      month: new Date(),
      isNewDeal: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    tableRowClassName(row, index) {
      if (this.isNewDeal.indexOf(row.id) >= 0) {
        return 'danger-row'
      } else {
        return '';
      }
    },
    dateChange() {
      this.handleCurrentChange(1)
      this.fetchData()
    },
    handleCurrentChange(index) {
      this.page = index
      this.solveData(this.tmpTableData)
    },
    fetchData() {
      var month = new Date(this.month).getMonth() + 1
      var year = new Date(this.month).getFullYear()
      var allDays = new Date(year, month, 0).getDate();
      var endTime = year + "-" + month + "-" + allDays;
      var startTime = year + "-" + month + "-" + "1";
      var url = this.$api.TotalMarketingInfo
      console.log(url)
      var d = {
        jianDaoTuan: true,
        beginTime: startTime,
        endTime: endTime
      }
      this.$fetch({
        url,
        method: 'post',
        data: this.$qs.stringify(d)
      }).then(resData => {
        this.tmpTableData = resData.data.result
        if (this.tmpTableData.length <= 0) {
          this.tmpTableData = []
          this.tableData = []
          return
        }
        this.solveData(resData.data.result)
      }).catch(err => {
        console.log(err)
      });
    },
    solveData(data) {
      if (data.length === 0) return
      var self = this
      var pageNum = self.pageSize //page组件上一页多少条
      var pageSize = Math.ceil(data.length / pageNum) //总页数
      this.total = data.length
      var sumPageData = []
      var isNewDeal = []
      var a = 0
      if (pageSize < self.page) {
        self.page = 1
      }
      this.isNewDeal = isNewDeal
      data.forEach((item, index) => {
        item.id = index + 1
        if (item.isNewDeal) {
          isNewDeal.push(item.id)
        }
      })
      for (var i = 1; i <= pageSize; i++) {

        if (i <= pageSize) {
          var pageArray = data.slice(a, a + pageNum)
          var obj = {}
          obj.pageArray = pageArray
          sumPageData.push(obj)
          a = a + pageNum

        }
      }
      if (self.page === '1') {
        this.tableData = sumPageData[0].pageArray
      } else {
        var d = Number(self.page)
        this.tableData = sumPageData[d - 1].pageArray
      }
    },
  },
};
</script>
  <style scoped>
.week-con {
  margin: 0.625rem;
}

.chart-container {
  display: block;
  /*background:#0D182B*/
}
</style>

